<template>
    <!-- 声音变调选项区域 -->
    <div class="inflection-content">
        <!-- 原声按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('yuansheng','原声')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/yuansheng.png" width="30px" height="30px">
            <span style="margin-top: 8px;">原声</span>
          </div>
        </el-button>
        <!-- 萝莉声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('luoli','萝莉')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/luoli.png" width="30px" height="30px">
            <span style="margin-top: 8px;">萝莉</span>
          </div>
        </el-button>
        <!-- 大叔声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('dashu','大叔')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/dashu.png" width="30px" height="30px">
            <span style="margin-top: 8px;">大叔</span>
          </div>
        </el-button>
        <!-- 肥仔声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('feizai','肥仔')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/feizai.png" width="30px" height="30px">
            <span style="margin-top: 8px;">肥仔</span>
          </div>
        </el-button>
        <!-- 搞怪声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('gaoguai','搞怪')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/gaoguai.png" width="30px" height="30px">
            <span style="margin-top: 8px;">搞怪</span>
          </div>
        </el-button>
        <!-- 孩子声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('haizi','孩子')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/haizi.png" width="30px" height="30px">
            <span style="margin-top: 8px;">孩子</span>
          </div>
        </el-button>
        <!-- 懒洋洋声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('lanyangyang','懒洋洋')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/lanyangyang.png" width="30px" height="30px">
            <span style="margin-top: 8px;">懒洋洋</span>
          </div>
        </el-button>    
        <!-- 网红声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('wanghong','网红')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/wanghong.png" width="30px" height="30px">
            <span style="margin-top: 8px;">网红</span>
          </div>
        </el-button>    
        <!-- 困兽声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('kunshou','困兽')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/kunshou.png" width="30px" height="30px">
            <span style="margin-top: 8px;">困兽</span>
          </div>
        </el-button>     
        <!-- 机械声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('jixie','机械')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/jixie.png" width="30px" height="30px">
            <span style="margin-top: 8px;">机械</span>
          </div>
        </el-button>      
        <!-- 感冒声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('ganmao','感冒')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/ganmao.png" width="30px" height="30px">
            <span style="margin-top: 8px;">感冒</span>
          </div>
        </el-button>       
        <!-- 空灵声音按钮 -->
        <el-button style="height: 70px;width: 50px;" @click="handleInflectionClick('kongling','空灵')">
          <div style="display:flex; flex-direction: column; justify-content: center;align-items: center;">
            <img src="../images/Inflection/kongling.png" width="30px" height="30px">
            <span style="margin-top: 8px;">空灵</span>
          </div>
        </el-button>          
      </div>
    </template>
    
    <script lang="ts">
    // 定义组件名称
    export default {
     name: "Inflection"
    };
    </script>
    
    <script setup lang="ts">
    // 导入定义事件发射器
    import { defineEmits } from 'vue'
    
    // 定义事件发射器
    const emit = defineEmits(['inflectionClick'])
    
    /**
     * 处理声音变调点击事件
     * @param key 声音变调的键值
     * @param title 声音变调的标题
     */
    function handleInflectionClick(key: string,title:string){
        // 发射声音变调事件
        emit("inflectionClick",key,title);
    }
    
    </script>
    
    <style scoped>
    /* 配置声音变调选项区域样式 */
    .inflection-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      /* 调整按钮之间的间距 */
    }
    </style>